<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    {{name}}
    <span>{{message}}</span>
  </div>
</body>
    <script>
    // 步骤拆分
    // 1 拿到模板
    // 2 拿到数据
    // 3 将数据与模板结合，生产html
    // 1
    const app = document.querySelector('#root');
    // 2
    let data = {
      message: 'yzl',
      name: 22
    }
    let kk = /\{\{(.+?)\}\}/g
    // 3 怎么将数据放到模板中？？？
    // 一般使用递归，还有一些特殊的算法比如队列
    // 现在的template 是dome 元素，
    // 在真正的vue源码中dom -》是字符串模板 -》vnode->真正dome
    function complier(template, data) {  
      let childNodes = template.childNodes // 取出子元素
      for (let i = 0; i < childNodes.length; i++) {
        let type = childNodes[i].nodeType // 1 元素    3 文本节点
        if (type === 3) {
          // 文本节点是否有{{}}
          let txt = childNodes[i].nodeValue // nodeValue 该属性只有文本节点有 文本内容
           // 函数的第一个参数是拼配到的值 如{{123}} 函数的第n个参数 如：123 函数返回值是 替换他的值
          txt = txt.replace(kk, function(_, g){
            console.log('_', _)
            console.log('g',g)
            let key = g.trim()
            let value = data[key]
            return value
          })
          childNodes[i].nodeValue = txt
        }
        else if (type === 1) { 
          // 元素要考虑有没有子元素
          complier(childNodes[i], data)
        }
      }
    }
    console.log(app)
    complier(app, data)
    console.log(app)
    // 我们此事没有生成新的template  是个引用类型 因为dome 是引用类型
    // 模板就没了，'坑'就没了，根据vue 响应式，改变data 的值，模板没了改不了，请看第二节
    </script>
</html>